<div class="layui-card">

    <div class="layui-card-body">
        <div class="layui-row">
            <div class="layui-col-md11 layui-col-md-offset1">
                <form id="form" class="layui-form" lay-filter="attachment-form">
                    {% if water.image.list %}
                        <div class="layui-form-item">
                            <label class="layui-form-label">{{ __('attachment.water_image') }}</label>
                            <div class="layui-input-block">
                                <ul class="list-inline plupload-preview">
                                    {% for key,item in water.image.list %}
                                        <li class="file-item thumbnail">
                                            <a href="javascript:;" class="attachment-item layui-border"
                                               data-index="{{ key }}">
                                                <img src="{{ item }}">
                                            </a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                    {% endif %}
                    <div class="layui-form-item">
                        <label class="layui-form-label">{{ __('attachment.water_text') }}</label>
                        <div class="layui-input-block">
                            <input type="text"
                                   name="text"
                                   value="{{ water.text.default|default('') }}"
                                    {% if not water.text.open %} readonly disabled {% endif %}
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">{{ __('attachment.add_water') }}</label>
                        <div class="layui-input-block">
                            <input type="radio" name="is_water" value="1" title="{{ __('switch.yes') }}">
                            <input type="radio" name="is_water" value="0" title="{{ __('switch.no') }} " checked>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                            {{ __('btn.upload') }}
                            <span class="layui-font-red">*</span>
                        </label>
                        <div class="layui-input-block">
                            <div class="layui-upload-drag" style="display: block;" id="upload-attachment">
                                <i class="layui-icon layui-icon-upload"></i>
                                <div>{{ __('upload.drag_tip') }}</div>
                                <div class="" id="attachment-image-preview">

                                    <ul class="list-inline plupload-preview">

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"></label>
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"
                                lay-submit
                                id="attachment-start-upload">
                            {{ __('btn.save') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>

    layui.use(['toast', 'upload', 'form'], function () {

        let upload = layui.upload
        let toast = layui.toast
        let form = layui.form

        let water_image_index = -1

        let result = {
            successful: 0,
            failed: 0
        }
        upload.render({
            elem: '#upload-attachment',
            url: '{{ auth_route('attachment/upload') }}',
            data: {
                water: function () {
                    return form.val('attachment-form')['is_water']
                },
                text: function () {
                    return form.val('attachment-form')['text']
                },
                image: function () {
                    return water_image_index
                }
            },
            accept: 'images',
            auto: false,
            bindAction: '#attachment-start-upload',
            multiple: true,
            allDone: function (obj) {
                toast.success(`上传总数:${obj.total}<br/>成功数量：${result.successful}<br/>失败数量：${result.failed}`)
                result.successful = 0
                result.failed = 0
            },
            choose: function (obj) {

                result.successful = 0
                result.failed = 0

                obj.pushFile()

                // 预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                obj.preview(function (index, file, result) {
                    let li = `<li class="file-item thumbnail">
    <a href="javascript:;">
        <img src="${result}"
             alt=""
             style="max-width: 100%">
    </a>
</li>
          `
                    $('#attachment-image-preview ul').append(li)
                    // 这里还可以做一些 append 文件列表 DOM 的操作
                })
            },
            done: function (res) {
                if (res.code) {
                    result.failed++
                } else {
                    result.successful++
                }
            }
        })

        $('.plupload-preview').on('click', '.attachment-item', function () {
            water_image_index = $(this).data('index')
            $('.attachment-item').removeClass('layui-border-orange').addClass('layui-border')
            $(this).removeClass('layui-border').addClass('layui-border-orange')
        })

    })
</script>